<template>
  <div class="login">
    <h1 class="text-3xl font-bold underline text-neutral-500">Hello world!</h1>

    <span class="login-page-container">Login {{ $t("login.username") }}</span>
    <hr />

    <a-button type="primary" @click="changeIcon" :preIcon="preIcon">
      change icon
    </a-button>

    <Button type="primary" @click="toggleLanguage"> change language </Button>
    <hr />
    <Button type="primary" @click="login">login</Button>
    <hr />
    <Button type="primary" @click="toggle">toggle</Button>
    <hr />
    <router-link to="/dashboard">Go Dashboard</router-link>
  </div>
</template>

<script setup>
import { Button } from "ant-design-vue";
import { RouterLink } from "vue-router";
import {
  useLoginServe,
  useLanguageServe,
  useLoginLanguageServe,
} from "@/services/language/Language.service";
import { useRoute } from "vue-router";
import { ref } from "vue";

import { useAppProviderContext } from "@/components/Application";

const { login } = useLoginServe();
const { toggleLanguage } = useLanguageServe();
const { toggle } = useLoginLanguageServe();
const route = useRoute();

const provideData = useAppProviderContext();
console.log("ddd", provideData.prefixCls);

const preIcon = ref("before");
function changeIcon() {
  preIcon.value = preIcon.value === "before" ? "after" : "before";
}
</script>

<style lang="scss" scoped>
/** scss变量配置 */
$page-name: "login-page";

.#{$page-name} {
  min-height: 100%;
  overflow: hidden;

  &-container {
    background-color: $dark-bg;
    padding: 10px 20px;
    margin: 20px;
    display: inline-block;
  }
}
</style>
